<template>
    <div class='user-page'>
        <el-row>
            <el-input v-model="username" placeholder="用户名" size="small" class="username"></el-input>
            <el-button size="small" @click="onSearch">查询</el-button>
            <el-button type="primary" size="small" @click="updateShow()">新增</el-button>
        </el-row>

        <el-table :data="tableData" border class="table" :max-height="clienHeight - 300">
            <el-table-column prop="id" label="ID" width="80" align="center">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="100" align="center">
            </el-table-column>
            <el-table-column prop="realName" label="姓名" width="100" align="center">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="160" align="center">
            </el-table-column>
            <el-table-column prop="roleName" label="角色" width="100" align="center">
            </el-table-column>
            <el-table-column prop="deptName" label="部门" width="100" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.status">禁用</el-tag>
                    <el-tag v-else>正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="updateShow(scope.row.id)">修改</el-button>
                    <el-button :type="scope.row.status ? 'success' : 'warning'" size="mini"
                        @click="changStatus(scope.row)">{{ scope.row.status ? '启用' : '禁用' }}</el-button>
                    <el-button type="danger" size="mini" @click="handlerDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-row style="text-align:right;">
            <div class="block">
                <!-- <span class="demonstration">完整功能</span> -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-row>
        <userData ref="userDialog" v-if="show" @close="handerClose"></userData>
    </div>
</template>

<script>
import userData from './userData.vue'
import { mapState } from 'vuex';
import { userAPI } from '@/http'
import { confirm } from '@/utils'
export default {
    name: 'user-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'user-page',
            show: false,
            username: '',
            tableData: [],
            currentPage: 1,
            limit: 10,
            total: 0,
        }
    },
    components: {
        userData
    },
    witch: {

    },
    created() {
        this.getTableList()
    },
    computed: {
        ...mapState(['clienHeight'])
    },
    methods: {
        updateShow(id) {
            this.show = true
            this.$nextTick(() => {
                this.$refs.userDialog.open(id)
            })
        },
        handerClose(val) {
            this.show = false
            if (val) {
                this.getTableList()
            }
        },
        handlerDelete(id) {
            console.log('asada', id);
            confirm(() => {
                userAPI.deletaFn(id).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: '用户删除操作成功',
                            type: 'success',
                        })
                        console.log('sdasdfasdfasdfadsdf');
                        this.getTableList()
                    }
                    else {
                        this.$message({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }, `对[id=${id}]的用户进行删除`)
        },
        changStatus(row) {
            let { id, status } = row
            let title = status == 1 ? '启用' : '禁用'
            confirm(() => {
                userAPI.changStatus({
                    id: id,
                    status: status ? 0 : 1
                }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: title + '成功',
                            type: 'success',
                        })
                        this.getTableList()
                    }
                    else {
                        this.$message({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }, `对[id=${id}]的用户进行[${title}]`)


        },
        onSearch() {
            this.currentPage = 1
            this.getTableList()
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val
            this.getTableList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getTableList()
        },
        getTableList() {
            userAPI.getList({
                page: this.currentPage,
                limit: this.limit,
                username: this.username,
            }).then(res => {
                // console.log('数据：', res.data);
                if (res.code === 200) {
                    this.tableData = res.data.list
                    this.total = res.data.totalCount
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.user-page {
    .username {
        width: 200px;
        margin-right: 10px;
    }

    .table {
        margin: 20px 0;
        width: 100%;
    }
}
</style>